import 'package:chatgreat/lang/lang.dart';
import 'package:chatgreat/page/component/background_container.dart';
import 'package:chatgreat/page/component/enhanced_popup_menu.dart';
import 'package:chatgreat/page/component/loading.dart';
import 'package:chatgreat/page/component/sliver_component.dart';
import 'package:chatgreat/page/creative_island/gallery/components/image_card.dart';
import 'package:chatgreat/page/creative_island/gallery/components/line_indicator.dart';
import 'package:chatgreat/page/creative_island/gallery/data/gallery_datasource.dart';
import 'package:chatgreat/page/component/theme/custom_size.dart';
import 'package:chatgreat/page/component/theme/custom_theme.dart';
import 'package:chatgreat/repo/api/creative.dart';
import 'package:chatgreat/repo/settings_repo.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_localization/flutter_localization.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:loading_more_list/loading_more_list.dart';

import 'gallery.dart';
import 'gallery_create.dart';

class GalleryHomeScreen extends StatefulWidget {
  final SettingRepository setting;
  const GalleryHomeScreen({super.key, required this.setting});

  @override
  State<GalleryHomeScreen> createState() => _GalleryHomeScreenState();
}

class _GalleryHomeScreenState extends State<GalleryHomeScreen> with SingleTickerProviderStateMixin{
  late TabController tabController;
  bool enableSetting = false;
  bool enableDelete = false;

  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BackgroundContainer(
      setting: widget.setting,
      child: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/bg1.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: SafeArea(
          child: Scaffold(
            backgroundColor: Colors.transparent,
            body: Column(
              children: [
                _buildTabBarWidget(),
                _buildTabWidget(),
              ],
            ),
          ),
        ),
      ),
    );
  }


  Widget _buildTabBarWidget() {
    return SizedBox(
      height: 44,
      width: double.infinity,
      child: Stack(
        children: [
          Container(
            height: 44,
            width: double.infinity,
            margin: EdgeInsets.symmetric(horizontal: 60.w),
            child: TabBar(
              indicator: RoundUnderlineTabIndicator(
                  insets: const EdgeInsets.only(bottom: 2),
                  borderSide: BorderSide(
                      width: 2.5.w,
                      color: const Color(0xFF16DFEB)
                  )
              ),
              dividerColor: Colors.transparent,
              labelColor: Colors.white,
              labelStyle: const TextStyle(fontSize: 17),
              labelPadding: const EdgeInsets.only(left: 0, right: 0),
              unselectedLabelColor: Colors.white.withOpacity(0.6),
              unselectedLabelStyle: const TextStyle(fontSize: 16),
              controller: tabController,
              onTap: (index) {
                if (index == 2) {
                  enableSetting = true;
                } else {
                  enableSetting = false;
                }
                setState(() { });
              },
              tabs: const [
                VgTab(text: '绘图作画'),
                VgTab(text: '大家在画'),
                VgTab(text: '我的画画'),
              ],
            ),
          ),

          Visibility(
            visible: enableSetting,
            child: Positioned(
              right: 5,
              bottom: 0,
              child: EnhancedPopupMenu(
                items: [
                  EnhancedPopupMenuItem(
                    title: '删除',
                    onTap: (ctx) async {
                      setState(() {
                        enableDelete = true;
                      });
                    },
                  ),
                  EnhancedPopupMenuItem(
                    title: '取消',
                    onTap: (ctx) {
                      setState(() {
                        enableDelete = false;
                      });
                    },
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _buildTabWidget() {
    return Expanded(
      child: TabBarView(
        controller: tabController,
        children: [
          GalleryCreateScreen(setting: widget.setting),
          GalleryScreen(setting: widget.setting, index: 1),
          GalleryScreen(setting: widget.setting, index: 2, enableDelete: enableDelete),
        ],
      ),
    );
  }

}
